<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>在线考试系统</title>
    <link rel="shortcut icon" th:href="@{/static/favicon.ico}" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link th:href="@{/static/css/style.css}" rel="stylesheet">
    <link th:href="@{/static/css/style-list.min.css?v=4.0.0}" rel="stylesheet">
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/bootstrap-table.css}" rel="stylesheet">
    <link th:href="@{/static/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/admin.css}" rel="stylesheet">
    <link th:href="@{/static/css/jquery.validator.css}" rel="stylesheet">
    <link th:href="@{/static/css/ui.css}" rel="stylesheet">
</head>

<body class="gray-bg white">
<div class="form-inline" role="form">
    <div class="tm_main">
        <div class="tm_container">
            <ul class="tm_breadcrumb">
                <li><a th:href="@{/common/welcome}">首页</a> <span class="divider">&gt;</span></li>
                <li><a th:href="@{/system/score/list}">成绩分析</a> <span class="divider">&gt;</span></li>
                <li class="active" th:text="${paperVo.paperName}"></li>
            </ul>
        </div>
        <div class="tm_container">
            <table border="0" cellpadding="0" width="100%">
                <TBODY><tr>
                    <!-- left -->
                    <td valign="top">
                        <form action="system/paper/updateDetail.do" id="form_paper_detail" method="post">
                            <div class="tm_adm_paper">
                                <div class="tm_adm_paper_head">
                                    <h1 th:text="${paperVo.paperName}"></h1>
                                    <h2 style="background:#ddd; padding:5px 0;">
                                        <b th:text="${paperType.value}"></b> &nbsp;
                                        <span th:if="${paperType.id==1}">考生试卷相同</span>
                                        <span th:if="${paperType.id==2}">考生试卷随机</span>
                                    </h2>
                                    <h2>
                                        <b>时间设定</b> : <span th:text="${paperVo.startTime+'--'+paperVo.endTime}"></span> &nbsp;&nbsp;
                                        <b>考试时长</b> : <span th:text="${paperVo.paperMinute}"></span> 分钟
                                    </h2>
                                    <h3>
                                        <b>卷面总分</b> :
                                        <input class="tm_txt" readonly="readonly" style="background:#eee;" type="number" th:value="${paperVo.totalScore}"/>
                                        &nbsp;&nbsp;
                                        <b>及格分数</b> :
                                        <input class="tm_txt" readonly="readonly" th:value="${paperVo.passScore}"  type="number" value="80" />
                                    </h3>
                                </div>
                            </div>
                        </form>
                    </td><!-- /left -->
                </tr>
                </TBODY>
            </table>
        </div>
    </div>
</div>
<div id="toolbar">
    <div class="form-inline" role="form">
        <div class="form-group">
            <input name="nameKey" type="text" class="form-control" placeholder="搜索账号（学号）" />
        </div>
        <div class="form-group">
            <select class="form-control"  name="majorKey" id="majorKey">
                <option value="">所属专业</option>
            </select>
        </div>
        <button id="searchBtn" class="btn btn-primary btn-md">搜索</button>
    </div>
</div>
<table id="table" data-toolbar="#toolbar"  data-show-toggle="true" data-show-columns="true" data-show-refresh="true" data-query-params="queryParams">
</table>
<script th:src="@{/static/js/jquery-3.3.1.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-table.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-table-editable.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-table-zh-CN.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/layer/layer.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-editable.min.js}" type="text/javascript" charset="utf-8"></script>
<script  th:src="@{/static/js/bootstrap-datetimepicker.min.js}"></script>
<script  th:src="@{/static/js/bootstrap-datetimepicker.zh-CN.js}"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var majors = [[${majors}]];
    if(majors!=null){
        for(var i=0;i<majors.length;i++){
            var major=majors[i];
            $('#majorKey').append("<option  value='"+major.id+"'>"+major.majorName+"</option>");
        }
    }
    var paperVo=[[${paperVo}]];
    /*]]>*/
    var table = $('#table');
    table.bootstrapTable({
        contentType: "application/x-www-form-urlencoded",
        method:'get',
        url: './'+paperVo.id+'/list/json' ,
        height: 600 ,
        pagination: true,//是否开启分页（*）
        pageNumber: 1,//初始化加载第一页，默认第一页
        pageSize: 50,//每页的记录行数（*）
        pageList: [30, 50, 100,150],//可供选择的每页的行数（*）
        sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
        columns: [
            {
                checkbox : true,
                align : 'center',
                value:"id",
            },
            {
                title: '序号',
                align: 'center',
                formatter: 'opIndex'
            },{
                field: 'account',
                title: '账号（学号）',
                align: 'center',
            }, {
                field: 'name',
                title: '姓名',
                align: 'center',
            }, {
                field: 'gradeName',
                title: '年级',
                align: 'center',
            }, {
                field: 'majorName',
                title: '专业',
                align: 'center',
            }, {
                field: 'majorName',
                title: '专业',
                align: 'center',
            },{
                field: 'classes',
                title: '班级',
                align: 'center',
            }, {
                field: 'submitTime',
                title: '提交时间',
                align: 'center',
            },{
                field: 'startTime',
                title: '开考时间',
                align: 'center',
            }, {
                field: 'resultMinute',
                title: '考试耗时(分钟)',
                align: 'center',
            }, {
                field:'resultScore',
                title: '最终得分',
                align: 'center',
                sortable:true,
                formatter:function (value,row,index) {
                    return "<span style='font-weight: bold;'>"+value+"</span>"
                }
            },{
                title:'查看',
                align:'center',
                formatter: function (value,row,index) {
                    return [
                        '<button data-toggle="tooltip" data-id="' + "'" + row.userId + "'" + '" class="btn btn-success btn-xs edit" onclick="detail(' + "'" + row.userId + "'" + ')" title="详情">',
                        '<i class="glyphicon glyphicon glyphicon-eye-open"></i>',
                        '</button>  '
                    ].join('');
                }
            }],
        onEditableSave:function(field,row,oldValue,el){
            table.bootstrapTable("resetView");
        }
    });
    function detail(userId) {
        window.open('./'+paperVo.id+'/'+userId);
    }
    function refreshTable(){
        table.bootstrapTable('refresh',{pageNumber:1});
    }
    function queryParams(params){
        $('#toolbar').find('input,select').each(function(){
            params[$(this).attr('name')] = $(this).val();
        });
        return params;
    }
    function opIndex(value, row, index){
        return [index+1].join('');
    }
    $("#searchBtn").on("click",function(){
        refreshTable();
    });
    $("[data-toggle='tooltip']").tooltip();
    $('#toolbar').find('select').change(function () {
        table.bootstrapTable('refresh',{pageNumber:1});
    });
</script>
</body>
</html>